<template>
  <div style="padding-top:1.5rem;text-align: left">
    <TopNav title="ChouPage.xycj" show_left="true" show_right="true" right_title="ChouPage.cjjl" @clickMore="handleClickMore"></TopNav>
    <div v-if="choujiangList" class="zhongjiang-list">
      <ul>
        <li v-for="item in choujiangList">🎉{{item}}</li>
      </ul>
    </div>
    <div>
      <nut-luckdraw
        class="drawTable"
        ref="luckDrawPrize"
        :luck-width="luckWidth"
        :luck-height="luckheight"
        :prize-list="prizeList"
        :turns-number="turnsNumber"
        :turns-time="turnsTime"
        :prize-index="prizeIndex"
        :style-opt="styleOpt"
        @end-turns="endTurns"
      >
        <template slot="item" slot-scope="scope">
          <div class="drawTable-name">{{ scope.item.prizeName }}</div>
          <div class="drawTable-img">
            <img :src="scope.item.prizeImg">
          </div>
        </template>
      </nut-luckdraw>
      <div @click="handleClickPlay(1)" class="pointer" :style="pointerStyle"></div>
    </div>
    <div class="play-mul">
      <span @click="handleClickPlay(10)">{{ $t('ChouPage.wscxhy') }}(20{{ $t('LevelDistributionPage.y') }})</span>
    </div>
    <audio src="/static/sounds/open.mp3" id="music" width="0" height="0" preload="auto"></audio>
  </div>
</template>

<script>

import TopNav from "../components/TopNav";
import $ from 'jquery'

export default {
  name: 'ChouPage',
    components: {
      TopNav
    },
    data () {
    return {
        loading: false,
        // 转盘大小
        luckWidth: '300px',
        luckheight: '300px',
        // 转盘指针图片样式
        pointerStyle: {
            width: '80px',
            height: '80px',
            backgroundImage: 'url("../../static/img/chou/zhou.png")',
            backgroundSize: 'contain',
            backgroundRepeat: 'no-repeat',
        },
        // 奖品列表
        prizeList: [
            {
                id: '11001',
                prizeName: this.$t("ChouPage.zj")+'1'+this.$t("ChouPage.crwsj"),
                prizeImg: '../../static/img/goods.png',
            },
            {
                id: '11110',
                prizeName: '298'+this.$t("ChouPage.zbkm"),
                prizeImg: '../../static/img/icon-vip.png',
            },
            {
                id: '11011',
                prizeName: this.$t("ChouPage.zj")+'3'+this.$t("ChouPage.crwsj"),
                prizeImg: '../../static/img/goods.png',
            },
            {
                id: '11111',
                prizeName: '598'+this.$t("ChouPage.whkm"),
                prizeImg: '../../static/img/icon-vip.png',
            },
            {
                id: '11101',
                prizeName: this.$t("ChouPage.zj")+'5'+this.$t("ChouPage.crwsj"),
                prizeImg: '../../static/img/goods.png',
            },
            {
                id: '10000',
                prizeName: this.$t('ChouPage.xxcy'),
                prizeImg: '../../static/img/smile.png',
            },
            {
                id: '12000',
                prizeName: '998'+this.$t("ChouPage.mxkm"),
                prizeImg: '../../static/img/icon-vip.png',
            },
        ],
        turnsNumber: 5, // 转动圈数
        turnsTime: 3,// 转动时间：S
        styleOpt: {
            prizeBgColors: ['rgb(255, 231, 149)','rgb(255, 247, 223)','rgb(255, 231, 149)','rgb(255, 247, 223)','rgb(255, 231, 149)','rgb(255, 247, 223)','rgb(255, 231, 149)'],
            borderColor: '#ff9800',
        },
        prizeIndex: -1, // 中奖奖品的index
        lock: false,// 防止多次连续点击抽奖
        num: 200,// 抽奖次数,根据需求定义,
        choujiangList: [],
        timer: '',
        curr_times : 1
    }
  },
    methods:{
      plauMusic(){
        let elem = document.getElementById('music');
        elem.play();
      },
      handleClickPlay(val){
          this.curr_times = val;
          this.startTurns();
        },
        startTurns() {
            if (!this.canBeRotated()) {
                return false;
            }
            this.lock = true;
            // 此为模拟随机数字，这里可以接受后台中奖信息
            this.$axios.get(this.$api_url.choujiang+"?times="+this.curr_times).then((res)=>{
                if(res.data.code == 0){
                    this.plauMusic();
                    this.prizeIndex = parseInt(res.data.data);
                    this.num--;
                    // 调用组件的方法，使转盘转动并停留在中奖奖品的那个扇形区域
                    this.$refs.luckDrawPrize.rotate(this.prizeIndex);
                } else{
                    this.$toast.fail(res.data.msg);
                }
            }).catch((err)=>{
                this.$toast.fail(err.message);
            }).then(()=>{
            })
            // // 成功后抽奖次数减1
            // this.num--;
            // // 中奖奖品的index
            // this.prizeIndex = index;
            // // 调用组件的方法，使转盘转动并停留在中奖奖品的那个扇形区域
            // this.$refs.luckDrawPrize.rotate(index);
        },
        endTurns() {
            if(this.prizeIndex != 5){
                this.$dialog({
                    content: this.$t("ChouPage.gxzj")+`！！！${this.prizeList[this.prizeIndex].prizeName}`,
                    noCloseBtn: false,
                    noOkBtn: true,
                    cancelBtnTxt: this.$t('ChouPage.wzdl')
                });
                if(this.prizeList[this.prizeIndex].id == "11110" ||
                    this.prizeList[this.prizeIndex].id == "11111"
                ) {
                    this.$toast.success(this.$t('ChouPage.jpshfhdssxd'));
                }
            } else{
                this.$dialog({
                    content: `😫`+this.$t("ChouPage.hyhwzj")+`~`,
                    noCloseBtn: false,
                    noOkBtn: true,
                    cancelBtnTxt: this.$t('ChouPage.wzdl')
                });
            }

            this.lock = false;
        },
        canBeRotated() {
            if (this.num <= 0) {
                this.$dialog({
                    content: this.$t("ChouPage.yjmycslmtzlb"),
                    noCloseBtn: false,
                    noOkBtn: true,
                    cancelBtnTxt: this.$t('ChouPage.wzdl')
                });
                return false;
            }
            if (this.lock) {
                return false;
            }
            return true;
        },
        handleClickMore(){
            location.href = '/#/chou_his'
        },
        autoScroll(obj){
            $(obj).find("ul").animate({
                marginTop : "-1rem"
            },600,function(){
                $(this).css({marginTop : "0px"}).find("li:first").appendTo(this);
            })
        },
        getData(){
            this.$axios.get(this.$api_url.get_choujiang_list).then((res)=>{
                this.choujiangList = res.data;
                if(res.data.length>0){
                    this.timer = setInterval(()=>{
                        this.autoScroll(".zhongjiang-list");
                    },2000);
                }
            })
        }
    },
    mounted() {
        this.getData();
    },
    destroyed() {
      if(this.timer){
          clearInterval(this.timer);
      }
    }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  .review-box{
    padding:1rem;
    text-align: left
  }
  .review-box img{
    max-width: 100%;
  }
  .zhongjiang-list ul{
    padding: 0.3rem;
    height: 6rem;
    overflow: hidden;
    font-size: 0.44rem;
  }
  .zhongjiang-list ul li{
    border-bottom: thin dashed #ccc;
    padding:0.2rem;
  }
  .nut-luckdraw{
    top:60%;
  }
  .pointer{
    top: 60%;
  }
  .play-mul{
    position: absolute;
    bottom: 1rem;
    height: 1rem;
    line-height: 1rem;
    text-align: center;
    width: 100%;
  }
  .play-mul span{
    padding: 0.2rem 0.4rem;
    color: #fff;
    border-radius: 0.1rem;
    font-size: 0.4rem;
    background: -moz-linear-gradient(top, #ffdd00 0%, #ff7f00 100%);
    background: -webkit-linear-gradient(top, #ffdd00 0%, #ff7f00 100%);
    background: -o-linear-gradient(top, #ffdd00 0%, #ff7f00 100%);
    background: -ms-linear-gradient(top, #ffdd00 0%, #ff7f00 100%);
    background: linear-gradient(to bottom, #ffdd00 0%, #ff7f00 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffdd00', endColorstr='#ff7f00', GradientType=0);
    background-color: #ff9700;
  }
</style>
